import loginVue from '../login.vue';
<route lang="yaml">
  meta:
    enabled: false
                </route>

<script lang="ts" setup>
import type { VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'
import apiCustomer from '@/api/modules/customer'

const g = useGlobalProperties()
const refModalForm = ref<VxeFormInstance>()
const pageData = reactive({
  loading: false,
  tableData: [] as any[],
  statusList: [] as any[],
  // 弹窗相关
  modalShow: false,
  modalName: '',
  resetPwdModalShow: false,
  pwd: '',
  curResetRow: {} as any,
})
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
interface ModalForm {
  id: number
  name: string
  short_name: string
  province: string
  city: string
  county: string
  addr: string
  lat: string
  lng: string
  contact: string
  telephone: string
  route_id: string
  route_name: string
}
const modalFormData = ref<ModalForm>({
  id: 0,
  name: '',
  short_name: '',
  province: '',
  city: '',
  county: '',
  addr: '',
  lat: '',
  lng: '',
  contact: '',
  telephone: '',
  route_id: '',
  route_name: '',
})
const formRules = {
  name: [
    { required: true, message: '请输入名称' },
  ],
}
interface FormDataVO {
  name: string
  shortCode: string
  code: string
  customerType: string
}
const formTop = reactive<FormDataVO>({
  name: '',
  shortCode: '',
  code: '',
  customerType: 'CO',
})
function sumbitModalEvent() {
  refModalForm.value?.validate((valid) => {
    if (!valid) { // 校验通过
      apiCustomer.createOrUpdate(modalFormData.value).then(() => {
        pageData.modalShow = false
        tablePage.currentPage = 1
        tablePage.pageSize = 10
        const req = {
          page: tablePage.currentPage,
          size: tablePage.pageSize,
          name: formTop.name,
          shortCode: formTop.shortCode,
          code: formTop.code,
          customerType: formTop.customerType,
        }
        apiPage(req)
      }).catch((e: any) => {
        if (e.msg) {
          ElMessage.error({
            message: e.msg,
            center: true,
          })
        }
      })
    }
  })
}
function cancelModalEvent() {
  pageData.modalShow = false
}
const tableRef = ref<VxeTableInstance>()
/// /////////////////////////////////////////formatter
// const formatterStatus: VxeColumnPropTypes.Formatter<any> = ({ cellValue }) => {
//   const res = g.selectDictLabel(pageData.statusList, cellValue)
//   return res
// }
/// ///////////////////////////////////右侧按钮相关

function confirmPwdModal() {
  // if (pageData.pwd) {
  //   pageData.curResetRow.password = pageData.pwd
  //   apiCustomer.resetPwd(pageData.curResetRow).then((res: any) => {
  //     ElMessage.success({
  //       message: '重置成功',
  //       center: true,
  //     })
  //     pageData.resetPwdModalShow = false
  //   }).catch((err) => {
  //     ElMessage.error({
  //       message: JSON.stringify(err),
  //       center: true,
  //     })
  //   })
  // }
  // else {
  //   ElMessage.error({
  //     message: '密码不能为空',
  //     center: true,
  //   })
  // }
}
function cancelPwdModal() {
  pageData.resetPwdModalShow = false
}

/// ///////////////////////////////////top按钮相关

/// ///////////////////////////////////api
function apiPage(req: any) {
  pageData.loading = true
  apiCustomer.page(req).then((res) => {
    pageData.tableData = res.data.list
    // console.log(pageData.tableData)
    tablePage.total = res.data.total
    pageData.loading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.loading = false
  })
}
/// ///////////////////////////////////翻页
const submitTopEvent: VxeFormEvents.Submit = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    name: formTop.name,
    shortCode: formTop.shortCode,
    code: formTop.code,
    customerType: formTop.customerType,
  }
  apiPage(req)
}

const resetTopEvent: VxeFormEvents.Reset = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    name: formTop.name,
    shortCode: formTop.shortCode,
    code: formTop.code,
    customerType: formTop.customerType,
  }
  // console.log(req)
  apiPage(req)
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    name: formTop.name,
    shortCode: formTop.shortCode,
    code: formTop.code,
    customerType: formTop.customerType,
  }
  apiPage(req)
}
/// ///////////////////////////////////生命周期
onBeforeMount(() => {
  g.getDicts('user_status').then((res: any) => {
    pageData.statusList = res.data.list
  })
})
onMounted(() => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    page: tablePage.currentPage,
    size: tablePage.pageSize,
    name: formTop.name,
    shortCode: formTop.shortCode,
    code: formTop.code,
    customerType: formTop.customerType,
  }
  apiPage(req)
})
</script>

<template>
  <div class="page-wrap">
    <div class="page-top">
      <vxe-form :data="formTop" style="padding-left: 5px;" @submit="submitTopEvent" @reset="resetTopEvent">
        <vxe-form-item title="名称" field="name" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.name" placeholder="请输入名称" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="编号" field="code" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.code" placeholder="请输入编号" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="助记码" field="shortCode" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.shortCode" placeholder="请输入助记码" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <template #default>
            <vxe-button type="submit" status="primary" content="搜索" />
            <vxe-button type="reset" content="重置" />
          </template>
        </vxe-form-item>
      </vxe-form>
      <!-- <vxe-toolbar>
        <template #buttons>
          <vxe-button style="margin-left: 5px;" @click="newOrg">
            新增
          </vxe-button>
          <vxe-button @click="removeSelected">
            删除选中
          </vxe-button>
        </template>
      </vxe-toolbar> -->
    </div>
    <page-main>
      <vxe-table
        ref="tableRef" auto-resize stripe border :loading="pageData.loading" :column-config="{ resizable: true }"
        :row-config="{ isHover: true }" :checkbox-config="{ highlight: true, range: true }" :data="pageData.tableData"
        align="center" header-align="center"
      >
        <vxe-column type="checkbox" width="50" />
        <vxe-column field="expression_cn" align="center" title="名称" />
        <vxe-column field="short_code" align="center" title="助记码" />
        <vxe-column field="customer_code" align="center" title="编码" />
        <vxe-column field="contact" align="center" title="联系人" />
        <vxe-column field="telephone" align="center" title="联系方式" />
        <vxe-column field="address" align="center" title="地址" />
        <!-- <vxe-column field="status" align="center" title="状态" :formatter="formatterStatus" /> -->
        <!-- <vxe-column title="操作" fixed="right" width="200">
          <template #default="{ row }">
            <vxe-button status="primary" @click="delItem(row)">
              查看账号
            </vxe-button>
          </template>
        </vxe-column> -->
      </vxe-table>
    </page-main>
    <div class="page-opration-container">
      <vxe-pager
        v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize"
        :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        :total="tablePage.total" @page-change="handlePageChange"
      />
    </div>
    <div>
      <vxe-modal v-model="pageData.modalShow" width="800" height="600">
        <template #title>
          <span style="color: red;">{{ pageData.modalName }}</span>
        </template>
        <template #default>
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div style="flex: 1;">
              <vxe-form ref="refModalForm" :data="modalFormData" :rules="formRules" title-width="80">
                <vxe-form-gather span="24">
                  <vxe-form-item title="姓名" field="realname" :item-render="{}" span="12">
                    <template #default="{ data }">
                      <vxe-input v-model="data.realname" placeholder="请输入姓名" clearable />
                    </template>
                  </vxe-form-item>
                  <vxe-form-item title="账号" field="username" :item-render="{}" span="12">
                    <template #default="{ data }">
                      <vxe-input v-model="data.username" placeholder="请输入账号" clearable />
                    </template>
                  </vxe-form-item>
                </vxe-form-gather>
                <vxe-form-gather span="24">
                  <vxe-form-item title="联系方式" field="phone" :item-render="{}" span="12">
                    <template #default="{ data }">
                      <vxe-input v-model="data.phone" placeholder="请输入联系方式" clearable />
                    </template>
                  </vxe-form-item>
                  <vxe-form-item title="状态" field="status" :item-render="{}" span="12">
                    <template #default="{ data }">
                      <vxe-select v-model="data.status" placeholder="请选择用户状态" clearable>
                        <vxe-option
                          v-for="(item, index) in pageData.statusList" :key="index" :value="item.value"
                          :label="item.label"
                        />
                      </vxe-select>
                    </template>
                  </vxe-form-item>
                </vxe-form-gather>
              </vxe-form>
            </div>
            <div style="display: flex;justify-content: flex-end;">
              <vxe-button content="取消" @click="cancelModalEvent" />
              <vxe-button status="primary" content="提交" @click="sumbitModalEvent" />
            </div>
          </div>
        </template>
      </vxe-modal>
    </div>
    <div>
      <vxe-modal v-model="pageData.resetPwdModalShow" width="600" show-footer>
        <template #title>
          <span style="color: red;">密码重置</span>
        </template>
        <template #default>
          <vxe-input v-model="pageData.pwd" placeholder="请输入新密码" clearable />
        </template>
        <template #footer>
          <div
            style="display: flex;align-items: center;justify-content: space-between;padding-top: 5px;border-top: 1px solid #909399;"
          >
            <vxe-button @click="cancelPwdModal">
              关闭
            </vxe-button>
            <vxe-button status="primary" @click="confirmPwdModal">
              确定
            </vxe-button>
          </div>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .page-top {
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 5px;
  }

  .page-main {
    flex: 1;
    padding-top: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: auto;
  }

  .page-opration-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
  }
}
</style>
